<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>{$title}</title>
	<link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
	<link href="{$Think.config.RESOURCEURL}wx_assets/shenqi/artifact.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="{$Think.config.RESOURCEURL}wx_assets/shenqi/component.css{$Think.config.RESOURCE_VER}" />
	<link rel="stylesheet" type="text/css" href="{$Think.config.RESOURCEURL}wx_assets/shenqi/animations.css{$Think.config.RESOURCE_VER}" />
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/shenqi/js/modernizr.custom.js"></script>
	<style>
		html,body{overflow-y: scroll}
	</style>
</head>
<body>
	<div class="container" id="pt-main">
		<div class="firstScreen pt-page">
			<if condition="$content neq ''">
				<div class="perInfo ">
					<img class="hide" src="{$headimgurl}">
					<span class="hide">{$nickname}</span>
				</div>
				<else/>
				<div class="perInfo middle">
					<img class="hide" src="{$headimgurl}">
					<span class="hide">{$nickname}</span>
				</div>
			</if>
			<div class="content">
				<span>{$content}</span>
			</div>
			<!-- <div class="ico_drag hide">
				<img src="{$Think.config.RESOURCEURL}wx_assets/shenqi/img/drag.png">
				<span>上下拖动</span>
			</div> -->
		</div>
		<volist name="pics" id="pic">
			<div class="screen pt-page">
				<img src="{$pic.picUrl}">
			</div>
		</volist>
		<if condition="$isRed eq 1">
			<div class="lastScreen pt-page">
				<div class="perInfo">
					<img src="{$headimgurl}">
					<span class="name">{$nickname}</span>
					<if condition="$status gt 0 and $isGetRed eq 0">
						<span class="title noJoin">手慢了，红包派完了</span>
				    </if>
				    <if condition="$status gt 0 and $isGetRed eq 1">
						<span class="title">红包已发完</span>
				    </if>
				    <if condition="$status eq 0 and $isGetRed eq 0">
						<span class="title">发了一个红包，金额随机</span>
				    </if>
				    <if condition="$status eq 0 and $isGetRed eq 1">
						<span class="title">发了一个红包，金额随机</span>
				    </if>
				</div>
				<if condition="$isGetRed eq 1 ">
					<div class="openPage opened">
						已领取
					</div>
				</if>
				<if condition="$isGetRed eq 0  and $status eq 0">
					<div class="openPage">
						拆红包
					</div>
				</if>
				<if condition="($isGetRed eq 0 and $status gt 0)">
					<div class="openPage opened" style="visibility:hidden;height:45px;">
						拆红包
					</div>
				</if>
				<div class="receiveInfo" id="UserListBox">
				</div>
				<a class="footer" href="http://mp.weixin.qq.com/s?__biz=MzAxNDMxODMzNQ==&mid=206403346&idx=1&sn=43b869ff65e3fddaaab1693a4e742c97#rd">
					<img style="height:30px;" src="{$Think.config.RESOURCEURL}wx_assets/shenqi/img/fahb.jpg{$Think.config.RESOURCE_VER}3">
				</a>
			</div>
		</if>
	</div>
	<if condition="$hasImg eq '1' OR $isRed eq 1">
		<div class="toDrag"></div>
	</if>
	<div class="share">
		<img src="{$Think.config.RESOURCEURL}wx_assets/shenqi/img/arrow.png{$Think.config.RESOURCE_VER}">
		<img class="showing" src="{$Think.config.RESOURCEURL}wx_assets/shenqi/img/showing.png{$Think.config.RESOURCE_VER}">
	</div>
	<if condition="$isRed eq 1">
		<div class="page">
			<a class="close"></a>
			<div class="head">
				<div class="imgDiv">
					<img src="{$headimgurl}">
				</div>
			</div>
			<div class="title"><span>{$nickname}</span><label>的红包</label></div>
			<div class="money"><label id="amountLabel"></label>元</div>
			<div class="msg">已存入微信钱包</div>
			<div class="foot"></div>
		</div>
	</if>
<script type="text/html" id="UserListTpl">
   <%if(count && count>0) {%>
       <div class="pNum">共有<%=count%>人领取了红包</div>
		<div class="persons">
			<%if(list){
	        for(var i=0;i<list.length;i++) {
	            var item=list[i];
	        %>
			<img src="<%=item.headimgurl%>">
			<%}%>
	      <%}%>
		</div>
	<%}%>
    </script>
<script>
	var baseUrl = '{$Think.config.SERVER_HOST}';
	var artifact={
		init:function(){
			this._initFullPage();
			this._initEvent();
			this._initFirstScreen();
			this._iniLastScreen();
			this._getTakeList();
		},
		_getTakeList:function(callback){
            var me=this;
            $.req.get("call.json?module=shenqi&customerId={$customerId}&method=getRedUserList",{
                userName:"{$userName}",
                params:{
                    "qId":"{$qId}",
                    "id":"{$id}"
                }
            },function(data){
                if(data){
                    me._render(data,callback);
                }
            });
        },
        _render:function(data,callback){
            var me=this;
           if(data){
                var html=template("UserListTpl", data),
                    container=$("#UserListBox");
                container.html(html);
                callback && callback();
           }   
        },
		_initFullPage:function(){
			var me = this;
			$(".pt-page").height($(window).height());
			$(".content").css("max-height",$(window).height()-$(".perInfo ").outerHeight()-50);
			var isCanshare="{$isCanShare}";
			if(isCanshare=="1") {
				if(!$.util.cookie('isShenqiShare')){
					$(".share").show();
					$.util.cookie('isShenqiShare',1,{path:"/","expires":365});
				}
			}
		},
		_initEvent:function(){
			var me=this;
			$(".openPage").click(function(){
				var obj=$(this);
				if(obj.hasClass("opened")){return;}
				obj.removeClass("scale").addClass("show").css({"transform":"rotateY(360deg)",
					"-webkit-transform":"rotateY(360deg)"});
				obj.one("webkitTransitionEnd",function(){
					$.util.pageLoading.show("正在打开红包");
					me.getRedMoney(function(data){
						$.util.pageLoading.hide();
						if(!data.code) {
							$("#amountLabel").text(data.amount);
							obj.removeClass("show");
							$(".page").addClass("show");
							obj.addClass("opened").html("已领取");
							me._getTakeList(function(){
							});
						} else {
							$.util.alert(data.msg);
							obj.addClass("scale").removeClass("animation").css({"transform":"rotateY(0deg)",
								"-webkit-transform":"rotateY(0deg)"}).removeClass("show");
						}
					});
				});
			});
			$(".close").click(function(){
				$(this).parent().removeClass("show");
			});
			$(".share").click(function(){
				$(this).hide();
			});

			$('body').on('touchmove', function (event) {
				event.preventDefault();
			});
		},
		_initFirstScreen:function(){
			var headImg = $(".container .firstScreen .perInfo img");
			var name = $(".container .firstScreen .perInfo span");
			var content = $(".container .firstScreen .content");
			var drag = $(".container .firstScreen .ico_drag");
			headImg.css("top",-(headImg.offset().top+headImg.height()));
			name.css("left",-(name.offset().left+name.width()/2));
			headImg.addClass("hide").removeClass("animation");
			name.addClass("hide").removeClass("animation");
			content.css({"transform": "scale(0)","-webkit-transform":"scale(0)"}).removeClass("animation");
			if($(".content span").height()>$(".content").height()) {
				drag.addClass("hide").removeClass("animation");
				$(".content").on("touchmove",function(){
					window.event.cancelBubble = true;
				});
			}
		},
		_firstScreenShow:function(){
			var headImg = $(".container .firstScreen .perInfo img");
			var name = $(".container .firstScreen .perInfo span");
			var content = $(".container .firstScreen .content");
			var drag = $(".container .firstScreen .ico_drag");
			headImg.addClass("animation").css("top",0).removeClass("hide");
			headImg.one("webkitTransitionEnd",function(){
				name.addClass("animation").css("left",0).removeClass("hide");
				name.one("webkitTransitionEnd",function(){
					content.addClass("animation").css({"transform": "scale(1)","-webkit-transform":"scale(1)"});
					if($(".content span").height()>$(".content").height()){
						content.one("webkitTransitionEnd",function(){
							drag.addClass("animation").removeClass("hide");
						})
					}
				})
			})
		},
		_iniLastScreen:function(){
			var isRed = '{$isRed}';
			if(isRed!=1){return;}
			var headImg = $(".container .lastScreen .perInfo img");
			var name = $(".container .lastScreen .perInfo span.name");
			var title = $(".container .lastScreen .perInfo span.title");
			var receiveInfo = $(".container .lastScreen .receiveInfo");
			var openPage = $(".container .lastScreen .openPage");
			var footer = $(".container .lastScreen .footer");
			headImg.css("top",-(headImg.offset().top+headImg.height())).addClass("hide").removeClass("animation");
			name.css("left",-name.width()).addClass("hide").removeClass("animation");
			title.css("right",-title.width()).addClass("hide").removeClass("animation");
			openPage.addClass("scale").removeClass("animation");
			receiveInfo.addClass("scale").removeClass("animation");
			footer.addClass("scale").removeClass("animation");
		},
		_lastScreenShow:function(){
			var me = this;
			var isRed = '{$isRed}';
			if(isRed!=1){return;}
			var headImg = $(".container .lastScreen .perInfo img");
			var name = $(".container .lastScreen .perInfo span.name");
			var title = $(".container .lastScreen .perInfo span.title");
			var openPage = $(".container .lastScreen .openPage");
			var receiveInfo = $(".container .lastScreen .receiveInfo");
			var footer = $(".container .lastScreen .footer");
			headImg.addClass("animation").css("top",0).removeClass("hide");
			headImg.one("webkitTransitionEnd",function(){
				name.addClass("animation").css("left",0).removeClass("hide");
				name.one("webkitTransitionEnd",function(){
					title.addClass("animation").css("right",0).removeClass("hide");
					title.one("webkitTransitionEnd",function(){
						openPage.removeClass("scale").addClass("animation").addClass("scale1");
						receiveInfo.addClass("animation").removeClass("scale");
						footer.addClass("animation").removeClass("scale");
						openPage.one("webkitTransitionEnd",function(){
							openPage.removeClass("scale1");

						})
					})
				})
			})

		},
		GetRandomNum:function(Min,Max){   
			var Range = Max - Min;   
			var Rand = Math.random();   
			return(Min + Math.round(Rand * Range));   
		},
		getRedMoney:function(callback){
			var me=this;
			$.req.get("call.json?module=shenqi&customerId={$customerId}&method=getRed",{
                userName:"{$userName}",
                params:{
                    "id":"{$id}"
                }
            },function(data){
                callback && callback(data);
            });
		},
		getShareUrl:function(){
			var shareUrl="";
            var me=this;
            var isCanshare="{$isCanShare}";
            var params={
                "id":"{$id}",
                "qId":"{$qId}",
                "fromGuid":"{$guid}",
                "fromUId":"{$fromUId}",
                "miUId":"{$fromUId}"
            }
            params=encodeURIComponent(JSON.stringify(params));
            shareUrl=baseUrl+'call.html?customerId={$customerId}&module=shenqi&method=getView&scope=1&params='+params;	
            return shareUrl;
		}   
	}
	artifact.init();
	$("#getBtn").click(function(){
		artifact.getRedMoney();
	});
	setTimeout("artifact._firstScreenShow()",500);
	var shareUrl=artifact.getShareUrl();
    wx_share.init({
        "title":'{$title}',
        "desc":"{$desc}",
        "link":shareUrl,
        "imgUrl":"{$shareImg}",
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": {$pkg.timestamp},
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        success:function(config,shareType){
            var p=$.util.getParamAsObject();
	        $.req.get("call.json?customerId={$customerId}&module=quan&method=saveShare",{
	            params:{
	                "qId":"{$qId}",
	                "sId":"{$sId}",
	                "guid":"{$guid}",
	                "fromGuid":"{$fromGuid}",
	                "miUId":"{$fromUId}",
	                "shareType":shareType,
	                "fromPage":"shenqi_getView"
	            }
	        },function(data){
	            if(data && !data.code){

	            }
	        });
        }
    });
</script>

	<script src="{$Think.config.RESOURCEURL}wx_assets/shenqi/js/pagetransitions.js"></script>
</body>
</html>